<template>
    <div class="nightSky">
        <div class='stars1'></div>
        <div class='stars2'></div>
        <div class='stars3'></div>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss">
@function multiple-box-shadow($n) {
    $value: '#{random(2000)}px #{random(4000)}px #FFF';
    @for $i from 2 through $n {
        $value: '#{$value} , #{random(2000)}px #{random(4000)}px #FFF';
    }
    @return unquote($value);
}

@mixin star($size, $shadow, $time) {
    position: absolute;
    width: $size;
    height: $size;
    background: transparent;
    box-shadow: $shadow;
    animation: aniStar $time linear infinite;
    &:after {
        content: " ";
        position: absolute;
        top: 2000px;
        width: $size;
        height: $size;
        background: transparent;
        box-shadow: $shadow;
    }
}

$shadows-small: multiple-box-shadow(700);
$shadows-medium: multiple-box-shadow(200);
$shadows-big: multiple-box-shadow(100);
.nightSky {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

.stars1 {
    @include star(1px, $shadows-small, 150s)
}

.stars2 {
    @include star(2px, $shadows-medium, 200s)
}

.stars3 {
    @include star(3px, $shadows-big, 300s)
}

@keyframes aniStar {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-2000px);
    }
}
</style>
